<script setup>
import { Bell, View , PieChart, Setting, Search, Plus, Delete, Edit, Back, Check, Close,ArrowDown, Loading} from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref,reactive, onMounted } from 'vue';
import {post,get, put, del} from '../api/http';

const taskTimeTypeList = reactive([{id:1,name:'今日',value:'today'},{id:2,name:'本周',value:'week'},{id:3,name:'本月',value:'month'},{id:4,name:'本年',value:'year'},{id:5,name:'自定义',value:'custom'}])
const projectList = reactive([]);
const taskTimeType = ref('');
const dateRange = ref('')
const showTaskSetting = ref(false);
const projectKeyword = ref('');
const taskKeyword = ref('');
const isCustomTaskTime = ref(false);
const changeProjectEdit = ref(false);
const isAddProject = ref(true);
const isAddTask = ref(true);
const showEditTask = ref(false);
const taskProject = reactive({projectName:'',projectDescribe:''})
const task = reactive({});
const taskList = reactive([]);
const taskStatusList = reactive([{id:1,name:'待开始',code:'no_started'},{id:2,name:'进行中',code:'started'},{id:3,name:'已完成',code:'complete'},])
const selectedForProject = reactive([])
const activeName = ref('no_started')
const taskCount = ref({})
const loading = ref(false)

const handlerTaskTimeType  = (id) => {
    if(id === 'custom'){
        isCustomTaskTime.value = true;
    }else{
        isCustomTaskTime .value= false;
    }
}

/**
 * 获取项目列表
 */
const getProjectList = () => {
    get('project',{keyword:projectKeyword.value}).then(res=>{
        projectList.value = res.data.list;
    })
}

const getTaskList = () => {
    loading.value = true
    taskStatistics();
    get('task',{keyword:taskKeyword.value, taskStatusType:activeName.value}).then(res=>{
        taskList.value = res.data.list;
        loading.value = false
    })
}

const addProject = () => {
    post('project',taskProject).then(res=>{
        ElMessage({message:res.msg,type:res.status?'success':'error'})
        if(res.status){
            changeProjectEdit.value = false;
            getProjectList();
        }
    })
}

const addTask = () => {
    post('task',task).then(res=>{
        ElMessage({message:res.msg,type:res.status?'success':'error'})
        if(res.status){
            showEditTask.value = false;
            getTaskList()
        }
    })
}
const editProject = (rowData) => {
    taskProject.projectName = rowData.projectName;
    taskProject.projectDescribe = rowData.projectDescribe;
    taskProject.id = rowData.id;
    isAddProject.value = false;
}

const setProject = () => {
    put('project',taskProject).then(res=>{
        ElMessage({message:res.msg,type:res.status?'success':'error'})
        if(res.status){
            changeProjectEdit.value = false;
            getProjectList();
        }
    })
}

const delProject = (ids) => {
    del('project',ids).then(res=>{
        ElMessage({message:res.msg,type:res.status?'success':'error'})
        if(res.status){
            getProjectList();
            getTaskList();
        }
    })
}

const handlerSelectedProject = (selection) => {
    selectedForProject.value = [];
    let temp = []
    selection.forEach(element => {
        temp.push(element.id);
    });
    selectedForProject.value = temp;
}

const removeProject = (id) => {
    if(id != -1){
        selectedForProject.value = [id];
    }
    ElMessageBox.confirm('该操作会永久删除项目以及项目对应的任务，是否继续？','提示',{type:'warning'}).then(()=>{
        delProject(selectedForProject.value)
    }).catch(()=>{
        ElMessage({message:'已取消删除',type:'info'})
    })
}

const editTask = (rowData) => {
    task.projectId = rowData.projectId;
    task.id = rowData.id;
    task.taskTitle = rowData.taskTitle;
    task.taskDescribe = rowData.taskDescribe;
    task.taskStartTime = rowData.taskStartTime;
    task.taskEndTime = rowData.taskEndTime;
    task.completeProgress = rowData.completeProgress;
    task.taskStatus = rowData.taskStatus;
    showEditTask.value = true;
    isAddTask.value = false;
}

const setTask = () => {
    put('task',task).then(res=>{
        ElMessage({message:res.msg,type:res.status?'success':'error'})
        if(res.status){
            showEditTask.value = false;
            getTaskList();
        }
    })
}

const delTask = (ids) => {
    del('task',ids).then(res=>{
        ElMessage({message:res.msg,type:res.status?'success':'error'})
        if(res.status){
            getTaskList();
        }
    })
}

const removeTask = (id) => {
    ElMessageBox.confirm('该操作会永久删除该任务，是否继续？','提示',{type:'warning'}).then(()=>{
        delTask([id])
    }).catch(()=>{
        ElMessage({message:'已取消删除',type:'info'})
    })
}

const changeTabs = () => {
    getTaskList()
}

const taskStatistics = () => {
    get('task/statistics').then(res=>{
        taskCount.value = res.data
    })
}

onMounted(()=>{
    getProjectList();
    getTaskList();
})

</script>
<template>
    <main v-blog-title data-title="任务面板">
        <el-row v-loading="loading">
            <el-col>
                <el-card class="card card-task">
                    <template #header>
                        <div class="card-task-title">
                            <div class="title-text">任务面板</div>
                            <div class="title-option" @click="showTaskSetting = true"><el-icon><Setting/></el-icon></div>
                        </div>
                    </template>
                    <div class="toolBar">
                        <div class="toolBarSearch">
                            <el-select style="width:120px;" placeholder="时间范围" v-model="taskTimeType" @change="handlerTaskTimeType">
                            <el-option v-for="item in taskTimeTypeList" :key="item.id" :label="item.name" :value="item.value"></el-option>
                                </el-select>
                                <div v-if="isCustomTaskTime">
                                    <el-date-picker style="margin-left:10px; width:400px;" v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"/>
                                </div>
                                <el-input v-model="taskKeyword" @input="getTaskList" style="width:250px;margin-left:10px;" placeholder="输入关键字" :suffix-icon="Search"></el-input>
                        </div>
                        <div>
                            <el-button @click="showEditTask=true; isAddTask=true;" style="margin-left:10px;" type="primary" :icon="Plus">新增任务</el-button>
                        </div>
                    </div>
                    <el-tabs type="border-card" @tab-change="changeTabs" v-model="activeName">
                        <el-tab-pane v-for="item in taskStatusList" :key="item.id" :name="item.code">
                            <template #label>
                                <div>{{ item.name }}（{{ taskCount[item.code] }}）</div>
                            </template>
                            <div class="task-box">
                                <el-table :data="taskList.value" border>
                                    <el-table-column show-overflow-tooltip label="任务标题" prop="taskTitle"></el-table-column>
                                    <el-table-column show-overflow-tooltip label="任务描述" prop="taskDescribe"></el-table-column>
                                    <el-table-column show-overflow-tooltip label="所属项目" prop="projectName"></el-table-column>
                                    <el-table-column show-overflow-tooltip label="状态" align="center" width="120">
                                        <template #default="scope">
                                            <div class="table-option">
                                                <el-dropdown>
                                                    <el-link style="margin-left:5px;">{{ scope.row.taskStatus === 'no_started' ? '待开始' : (scope.row.taskStatus === 'started' ? '进行中' : '已完成') }}<el-icon><ArrowDown /></el-icon></el-link>
                                                    <template #dropdown>
                                                        <el-dropdown-item v-for="item in taskStatusList" :key="item.id">{{ item.name }}</el-dropdown-item>
                                                    </template>
                                                </el-dropdown>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column align="center" show-overflow-tooltip label="开始时间" prop="taskStartTime"></el-table-column>
                                    <el-table-column align="center" show-overflow-tooltip label="结束时间" prop="taskEndTime"></el-table-column>
                                    <el-table-column label="完成进度" width="100" align="center">
                                        <template #default="scope">
                                            <span>{{ scope.row.completeProgress }}%</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column align="center" show-overflow-tooltip label="创建时间" prop="createTime"></el-table-column>
                                    <el-table-column show-overflow-tooltip label="操作" align="center">
                                        <template #default="scope">
                                            <el-link @click="editTask(scope.row)" type="primary"><el-icon><Edit/></el-icon>编辑</el-link>
                                            <el-link type="danger" style="margin-left: 5px;" @click="removeTask(scope.row.id)"><el-icon><Delete/></el-icon>删除</el-link>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </el-card>
            </el-col>
        </el-row>
        <!-- 项目弹框 -->
        <el-dialog title="任务配置" v-model="showTaskSetting">
            <div v-if="!changeProjectEdit">
                <div class="toolBar">
                    <div class="tool-left">
                        <el-input v-model="projectKeyword" @input="getProjectList" :suffix-icon="Search" placeholder="输入关键字"></el-input>
                    </div>
                    <div class="tool-right">
                        <el-button :icon="Plus" type="primary" @click="changeProjectEdit=true">新增项目</el-button>
                        <el-button @click="removeProject(-1)" :icon="Delete" type="danger">删除项目</el-button>
                    </div>
                </div>
                <el-table :data="projectList.value" @select="handlerSelectedProject">
                    <el-table-column width="40" type="selection"></el-table-column>
                    <el-table-column label="项目名称" prop="projectName"></el-table-column>
                    <el-table-column show-overflow-tooltip label="项目描述" prop="projectDescribe"></el-table-column>
                    <el-table-column label="创建时间" prop="createTime"></el-table-column>
                    <el-table-column label="操作" align="center" width="120">
                        <template #default="scope">
                            <el-link @click="editProject(scope.row)" type="primary"><el-icon><Edit/></el-icon>编辑</el-link>
                            <el-link style="margin-left:5px;" @click="removeProject(scope.row.id)" type="danger"><el-icon><Delete/></el-icon>删除</el-link>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div v-if="changeProjectEdit">
                <el-form style="margin-top: 10px;" :model="taskProject">
                    <el-form-item label="项目名称">
                        <el-input v-model="taskProject.projectName" placeholder="项目名称"></el-input>
                    </el-form-item>
                    <el-form-item label="项目描述">
                        <el-input v-model="taskProject.projectDescribe" type="textarea" placeholder="项目描述" resize="none"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <div style="width: 100%; text-align:right;">
                            <el-button @click="changeProjectEdit = false; isAddProject = true;" :icon="Back">返回</el-button>
                            <el-button v-if="isAddProject" @click="addProject" type="primary" :icon="Plus">添加</el-button>
                            <el-button v-if="!isAddProject" @click="setProject" type="primary" :icon="Edit">修改</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
        <el-dialog title="添加任务" v-model="showEditTask">
            <el-form :model="task">
                <el-form-item label="所属项目">
                    <el-select filterable placeholder="选择项目" v-model="task.projectId">
                        <el-option v-for="project in projectList.value" :key="project.id" :label="project.projectName" :value="project.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="任务标题">
                    <el-input placeholder="任务标题" v-model="task.taskTitle"></el-input>
                </el-form-item>
                <el-form-item label="任务描述">
                    <el-input resize="none" placeholder="任务描述" type="textarea" v-model="task.taskDescribe"></el-input>
                </el-form-item>
                <el-form-item label="开始时间">
                    <el-date-picker value-format="YYYY-MM-DD HH:mm:ss" v-model="task.taskStartTime" type="datetime" placeholder="开始时间"></el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间">
                    <el-date-picker value-format="YYYY-MM-DD HH:mm:ss" v-model="task.taskEndTime" type="datetime" placeholder="结束时间"></el-date-picker>
                </el-form-item>
                <el-form-item label="完成进度">
                    <el-slider v-model="task.completeProgress" show-input />
                </el-form-item>
                <el-form-item label="任务状态">
                    <el-select v-model="task.taskStatus" placeholder="任务状态">
                        <el-option v-for="status in taskStatusList" :key="status.id" :label="status.name" :value="status.code"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <div style="text-align: right; width:100%;">
                        <el-button @click="showEditTask = false" :icon="Close">取消</el-button>
                        <el-button v-if="isAddTask" :icon="Check" @click="addTask" type="primary">提交</el-button>
                        <el-button v-if="!isAddTask" :icon="Check" @click="setTask" type="primary">修改</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </el-dialog>
    </main>
</template>
<style scoped>
main{
    min-height: calc(100vh - 60px);
    background-color: var(--el-color-default);
}
.card-title{
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card{
    margin: 10px;
}
.num{
    font-weight: bold;
    font-size: 24px;
    text-align: center;
}
main:deep(.el-card__header){
    /* background: linear-gradient(315deg,#42d392 10%,#647eff); */
    background-color: var(--el-color-default);
    color: var(--el-color-dark);
}
.title-text{
    font-weight: bold;
}
main:deep(.el-card__body){
    color: #272B4E;
}
.card-task-title{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.title-option{
    cursor: pointer;
}
.title-option:hover{
    color: #272B4E;
}
.toolBar{
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    justify-content: space-between;
}
.toolBarSearch{
    display: flex;
    align-items: center;
}
.card-task{
    min-height: 550px;
}
.table-option{
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>